Skip to content

Nikita-sidepanel-design #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
nikitalokhmachev-ai merged 3 commits into from
May 7, 2025
Merged

Nikita-sidepanel-design #9

nikitalokhmachev-ai merged 3 commits into from
May 7, 2025

Conversation

@nikitalokhmachev-ai
Copy link
Collaborator

@nikitalokhmachev-ai nikitalokhmachev-ai commented May 6, 2025 •
edited by pr-agent-monadical bot
Loading

User description

In this branch, I completed the following tasks:

  1. Move the default session archives to the side panel view.
  2. Stylize the side panel component based on the mockup provided by Henry.

Notes:

  • Currently, the side panel has no ability to work across different tabs and it needs to be reopened in order to record the right page.
  • The search bar, the tabs, and the gear button don't do anything.

PR Type

Enhancement

Description

  • Implemented side panel archive list view

  • Added stylized UI based on mockup

  • Created archive browsing functionality

  • Added search and tabs interface

Changes walkthrough 📝

Relevant files
Enhancement
argo-archive-list.ts
Create archive list component with Material Design             

src/argo-archive-list.ts

  • Created new component to display archived pages in a collapsible list
  • Implemented date-based grouping of archives with expandable sections
  • Added styling for list items with favicons and page titles
  • Implemented functionality to open archived pages
    		• +223/-0 
    bg.ts
    Add background support for archive retrieval                         

    src/ext/bg.ts

  • Added handler for "getPages" message to retrieve archived pages
  • Implemented functionality to fetch pages from default collection
  • Code formatting improvements for better readability
    		• +26/-16 
    sidepanel.ts
    Redesign sidepanel UI with Material Design                             

    src/sidepanel.ts

  • Replaced old UI with Material Design components
  • Updated recording buttons with new styling and icons
  • Removed unnecessary icons and imports
  • Added imports for Material Design components
    		• +65/-71 
    sidepanel.html
    Implement new sidepanel HTML structure                                     

    static/sidepanel.html

  • Completely redesigned HTML structure with Material Design
  • Added search bar with rounded styling
  • Implemented tabbed interface for different archive types
  • Added container for archive list with scrolling
    		• +86/-12 
    Configuration changes
    .prettierrc
    Add Prettier configuration                                                             

    .prettierrc

  • Added Prettier configuration file for consistent code formatting
  • Set tab width to 2 spaces and print width to 120 characters
  • Configured to use double quotes and semicolons
    		• +7/-0     
    Need help?
  • Type /help how to ... in the comments thread for any questions about PR-Agent usage.
  • Check out the documentation for more information.
    •

    @pr-agent-monadical
    Copy link

    pr-agent-monadical bot commented May 6, 2025

    PR Reviewer Guide 🔍

    Here are some key observations to aid the review process:

    ⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
    🧪 No relevant tests
    🔒 No security concerns identified
    ⚡ Recommended focus areas for review

    Event Propagation

    The checkbox click event stopPropagation may prevent parent list item click events from working properly in some scenarios. Consider testing this interaction thoroughly.

     
    <md-checkbox
  slot="start"
  touch-target="wrapper"
  @click=${(e: Event) => e.stopPropagation()}
></md-checkbox>
    Missing Condition Closure

    The if statement starting at line 248 is missing its closing bracket, which could lead to unexpected behavior. The code still works because the indentation makes it appear as if the condition block is properly closed.

     
    if (changedProperties.has("pageUrl") || changedProperties.has("failureMsg")) {
  // @ts-expect-error - TS2339 - Property 'canRecord' does not exist on type 'RecPopup'.
  this.canRecord =
    // @ts-expect-error - TS2339 - Property 'pageUrl' does not exist on type 'RecPopup'.
    this.pageUrl &&
    Tab Panel Functionality

    The tab panels are defined but there's no JavaScript code to handle switching between them when tabs are clicked. This matches the PR description noting that tabs don't do anything yet.

     
    <md-tabs id="tabs" aria-label="Archive tabs">
  <md-primary-tab class="md-typescale-label-large">My Archives</md-primary-tab>
  <md-primary-tab class="md-typescale-label-large">My Shared Archives</md-primary-tab>
</md-tabs>

<div class="tab-panels" style="flex: 1; overflow-y: auto; position: relative; padding-bottom: 90px;">
  <div id="my-archives" class="tab-panel" active>
    <argo-archive-list></argo-archive-list>
  </div>
  <div id="shared-archives" class="tab-panel">
    <!-- future “shared” list… -->
  </div>
</div>

    pr-agent-monadical[bot]
    pr-agent-monadical bot reviewed May 6, 2025
    View reviewed changes
    @nikitalokhmachev-ai
    Copy link
    Collaborator Author

    nikitalokhmachev-ai commented May 6, 2025

    #4

    @nikitalokhmachev-ai
    Copy link
    Collaborator Author

    nikitalokhmachev-ai commented May 6, 2025

    image

    @Shrinks99 Shrinks99 self-requested a review May 7, 2025 15:30
    @nikitalokhmachev-ai nikitalokhmachev-ai merged commit d7b15e0 into sidepanel2 May 7, 2025
    1 of 4 checks passed
    @Shrinks99 Shrinks99 deleted the nikita-sidepanel-design branch May 7, 2025 20:50
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

    Reviewers

    @Shrinks99 Shrinks99 Shrinks99 approved these changes

    @yamijuan yamijuan yamijuan approved these changes

    +1 more reviewer

    @pr-agent-monadical pr-agent-monadical[bot] pr-agent-monadical[bot] left review comments

    Reviewers whose approvals may not affect merge requirements

    Assignees

    No one assigned

    Labels

    Review effort 3/5

    Projects

    None yet

    Milestone

    No milestone

    Development

    Successfully merging this pull request may close these issues.

    3 participants

    @nikitalokhmachev-ai @Shrinks99 @yamijuan